<template>
  <div class="tooltip-box flex-item-c" v-if="isShowTooltip">
    <img :src="tooltipIcon" alt="" />
    <span>{{ content }}</span>
  </div>
</template>

<script setup>
import { ref, defineExpose, defineProps } from 'vue';
import tooltipIcon from '@/assets/images/industryMap/tooltipIcon.png';

const content = ref('提示');

const isShowTooltip = ref(false);

let timer = null;
const handleShowTooltip = (val) => {
  content.value = val ? val : '提示';
  isShowTooltip.value = true;
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    isShowTooltip.value = false;
  }, 1000);
};
defineExpose({
  init: handleShowTooltip,
});
</script>
<style lang="scss" scoped>
.tooltip-box {
  position: absolute;
  padding: 20px 24px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  &.flex-item-c {
    display: flex;
    align-items: center;
  }
  img {
    height: 40px;
  }
  span {
    margin-left: 8px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
    line-height: 33px;
  }
}
</style>
